<template>
  <div class="changeInfo">
    <!-- 编辑信息页面 -->
    <div class="cust_tit">
      <img :src="img1" alt="" @click="fanhui" />
      <span>编辑</span>
      <img :src="img2" alt="" @click="shouye" />
    </div>
    <!-- 主体部分 -->
    <ul>
      <li>
        <span>客户姓名</span>
        <input type="text" v-model="Val1" />
      </li>
      <li>
        <span>联系方式</span>
        <input type="text" v-model="Val2" />
      </li>
      <li>
        <span>学历</span>
        <input type="text" v-model="Val3" />
      </li>
      <li>
        <span>年龄</span>
        <input type="text" v-model="Val4" />
      </li>
      <li>
        <span>性别</span>
        <input type="text" v-model="Val5" />
      </li>
      <li>
        <span>所属城市</span>
        <input type="text" v-model="Val6" />
      </li>
      <li>
        <span>公司名称</span>
        <input type="text" v-model="Val7" />
      </li>
      <li>
        <span>职务</span>
        <input type="text" v-model="Val8" />
      </li>
    </ul>
    <!-- 提交按钮 -->
    <van-button round type="info" size="large" @click="changeInfo"
      >确认修改</van-button
    >
  </div>
</template>

<script>
import { GetCustInfo, PutCustInfo } from "@/request/api";
export default {
  data() {
    return {
      img1: require("@/assets/返回.png"),
      img2: require("@/assets/首页按钮.png"),
      Val1: "",
      Val2: "",
      Val3: "",
      Val4: "",
      Val5: "",
      Val6: "",
      Val7: "",
      Val8: "",
    };
  },
  created() {
    GetCustInfo({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res.data);
      this.Val1 = res.data.custName;
      this.Val2 = res.data.telephone;
      this.Val3 = res.data.education;
      this.Val4 = res.data.age;
      this.Val5 = res.data.sex;
      this.Val6 = res.data.cityName;
      this.Val7 = res.data.company;
      this.Val8 = res.data.position;
      // console.log(typeof this.Val4);
    });
  },
  methods: {
    changeInfo() {
      PutCustInfo({
        custName: this.Val1,
        cityName: this.Val6,
        company: this.Val7,
        position: this.Val8,
        telephone: this.Val2,
        education: this.Val3,
        sex: this.Val5,
        age: this.Val4,
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res);
      });
    },
    fanhui() {
      this.$router.go(-1);
    },
    shouye() {
      this.$router.push("/home");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.changeInfo {
  min-height: 100%;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  /* 头部样式 */
  .cust_tit {
    padding: 0.3rem 0.2rem 0.1rem;
    background-color: #003399;
    color: white;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.2rem;
      height: 0.2rem;
    }
  }
  ul {
    margin-top: 0.1rem;
    li {
      padding: 0.1rem;
      width: 100%;
      box-sizing: border-box;
      background-color: white;
      border-top: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      &:nth-child(3) {
        margin-top: 0.1rem;
      }
      input {
        text-align: right;
        border: 0;
      }
    }
  }
  .van-button {
    position: fixed;
    bottom: 0;
  }
}
</style>